<template>
	<view class="container">
		<view class="h">
			<view class="u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-30 bg-color" style="position:ablative;overflow: hidden;">
				<view class="u-m-r-10" style="float: left;">
					<view class="header-content">
						<view class="header-children" @click="clickDate">
							<view class="header-children">{{show_time}} 年</view>
							<view class="header-children">
								<u-icon class="header-children header-icon" name="arrow-down-fill" color="#323232" size="30"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="u-m-r-10" style="position:absolute;left:50%;top:4%;transform:translate(-50%,-50%);font-size: 28rpx;color: #909399;">
					<view class="header-children"> {{title}} </view>
				</view>
			</view>
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 bg-color" style="text-align: center;">
				<view class="u-flex-1">
					<view class="balance_int">{{balance_int}}</view>
					<view class="balance_decimal">.{{balance_decimal}}</view>
				</view>
			</view>
			
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 bg-color" style="text-align: center;">
			
				<view class="u-m-r-10 u-flex-1">
					<view>
						<view class="t-l t-t">收入</view>
						<view class="t-l t-i"> {{income_int}} </view>
						<view class="t-l t-d"> .{{income_decimal}} </view>
					</view>
				</view>
				<view class="" style="margin: 0;
					border-right-width: 1px;
					border-right-style: solid;
					height: 40rpx;
					transform: scaleX(0.5);
					border-color: #0c0c0c;">
				</view>
				
				<view class="u-m-r-10 u-flex-1">
					<view>
						<view class="t-l t-t">支出</view>
						<view class="t-l t-i"> {{expenditure_int}} </view>
						<view class="t-l t-d"> .{{expenditure_decimal}} </view>
					</view>
				</view>
			</view>
			
			<view class="u-flex u-p-l-20 u-p-r-20">
				<view class="u-m-r-10 u-flex-1 list-title">
					月份
				</view>
				<view class="u-m-r-10 u-flex-1 list-title">
					收入
				</view>
				<view class="u-m-r-10 u-flex-1 list-title">
					支出
				</view>
				<view class="u-m-r-10 u-flex-1 list-title">
					结余
				</view>
			</view>
		</view>
		<scroll-view 
			scroll-y="true" 
			:style="{height:scroll_view_height+'px'}"
			refresher-enabled="true"
			:refresher-triggered="refresherTriggered"
			@refresherrefresh="refresher()"
			@refresherrestore="refresherrestore()"
			@refresherabort="refresherabort()">
			<view class="u-flex u-p-l-20 u-p-r-20 list-item" v-for="(item, index) in list" :key="index">
				<view class="u-m-r-10 u-flex-1 list-title">{{item.month}}</view>
				<view class="u-m-r-10 u-flex-1 list-title">{{item.income}}</view>
				<view class="u-m-r-10 u-flex-1 list-title">{{item.expenditure}}</view>
				<view class="u-m-r-10 u-flex-1 list-title">{{item.balance}}</view>
			</view>
		</scroll-view>
		<u-picker mode="time" v-model="picker_show" :params="picker_params" :default-time="picker_time" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script setup>
import { ref } from "vue";
const picker_params =  ref({
  year: true,
  month: false,
  day: false,
  hour: false,
  minute: false,
  second: false
})
const picker_show =  ref(false)
const picker_time =  ref("")
const phone_height =  ref("0")
const scroll_view_height =  ref("0")
const refresherTriggered =  ref(false)
const _refresherTriggered =  ref(false)
const show_time =  ref("")
const title =  ref("结余")
const balance =  ref("0.00")
const balance_int =  ref("0")
const balance_decimal =  ref("00")
const income =  ref("0.00")
const income_int =  ref("0")
const income_decimal =  ref("00")
const expenditure =  ref("0.00")
const expenditure_int =  ref("0")
const expenditure_decimal =  ref("00")
const list =  ref([
  {month: "12月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "11月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "10月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "09月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "08月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "07月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "06月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "05月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "04月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "03月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "02月", income: "0.00", expenditure: "0.00", balance: "0.00"},
  {month: "01月", income: "0.00", expenditure: "0.00", balance: "0.00"},
])
const reload = ref(false)

function clickDate(){
  picker_show.value = true;
}
function pickerConfirm(e) {
  picker_time.value = e.year + "-" + "01";
  show_time.value = e.year;
}

function refresher(){
  console.log('下拉刷新');
  if(_refresherTriggered.value){
    return;
  }
  _refresherTriggered.value = true;
  if(!refresherTriggered.value){
    refresherTriggered.value = true;
  }
}
function refresherrestore(){
  console.log("自定义下拉刷新被复位");
  refresherTriggered.value = false;
  _refresherTriggered.value = false;
}
function refresherabort(){
  console.log("自定义下拉刷新被中止");
  refresherTriggered.value = false;
  _refresherTriggered.value = false;
}
function formatSum(){
  let income_sum_arr = income.value.split('.');
  income_int.value = income_sum_arr[0];
  income_decimal.value = income_sum_arr[1];

  let expenditure_sum_arr = expenditure.split('.');
  expenditure_int.value = expenditure_sum_arr[0];
  expenditure_decimal.value = expenditure_sum_arr[1];

  let balance_sum_arr = balance.value.split('.');
  balance_int.value = balance_sum_arr[0];
  balance_decimal.value = balance_sum_arr[1];
}

// 计算scroll-view高度
uni.getSystemInfo({
  success(res) {
    phone_height.value = res.windowHeight

    let v = uni.createSelectorQuery().select(".h");
    v.boundingClientRect(data=>{
      scroll_view_height.value = phone_height.value - data.height;
    }).exec();
  }
})

let t = new Date().toISOString().slice(0, 10);
let t_a = t.split("-");
picker_time.value = t_a[0] + "-" + t_a[1];

show_time.value = t_a[0];
</script>

<style lang="scss" scoped>	
.container {
	background-color: #ffffff;
}
.bg-color{
	background-color: #FDDC2D
}
.header-children,.t-l{
	display: initial;
}
.header-icon{
	padding: 15rpx;
}
.balance_int{
	display: initial;
	font-size: 50rpx;
}
.balance_decimal{
	display: initial;
	font-size: 40rpx;
}
.t-t{
	font-size: 28rpx;
	color: #909399;
	padding-right: 20rpx;
}
.t-i{
	font-size: 35rpx;
}
.t-d{
	font-size: 30rpx;
}
.list-title{
	height: 60rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	text-align: center;
	color: #909399;
}
.list-item{
	height: 90rpx;
	border-top: 1px solid #d8d8d8;
}
</style>
